<template>
  <div class="tagSearch">
    <h4>添加标签：<span v-for="(tag, index) in tagList" :key="index" class="labInfo">{{tag}}</span><input id="newTag" class="labInput" type="text" placeholder="输入添加的标签">
      <span @click="toTagList" class="labInfo" ><svg t="1622014583824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2484" width="13" height="13"><path d="M510.635 68.267c22.621 0 40.96 18.338 40.96 40.96v360.447h360.448c22.621 0 40.96 18.34 40.96 40.96 0 22.622-18.339 40.96-40.96 40.96H551.595v360.449c0 22.621-18.339 40.96-40.96 40.96-22.622 0-40.96-18.339-40.96-40.96V551.595H109.227c-22.622 0-40.96-18.339-40.96-40.96 0-22.622 18.338-40.96 40.96-40.96l360.448-0.001V109.227c0-22.622 18.338-40.96 40.96-40.96z" fill="var(--theme-fontMain)" p-id="2485"></path></svg></span></h4>
  </div>
</template>

<script>
  import $ from 'jquery'

    export default {
        name: "tagSearch",
      data(){
          return{
            tagList:[],
            tagStr:'',
            newTag:[],
          }
      },
      methods:{
          toTagList(){
            const newTag = $("#newTag")
            if(newTag.val() === ''){
              this.$message.warning("新添标签不能为空")
            }else{
              this.tagList.push(newTag.val())
              this.tagStr = this.tagList.join(' ')
              this.$message.success("添加成功")
              this.$emit('tagsText', this.tagStr)
              newTag.val('')
            }
          },
      },

    }
</script>

<style lang="less" scoped>
  h4{
    margin-top: 7px;
    font-weight: 400;
    color: var(--theme-fontMain);
  }
  .labInput{
    outline: none;
    border: none;
    font-size: 14px;
    padding: 3px 7px;
    color: var(--theme-fontMain);
    border-radius: 4px;
    background-color: var(--theme-button);
    font-weight: 400;
    width: 100px;
    margin-right: 5px;
    user-select: none;

  }
  ::-webkit-input-placeholder{
    color: var(--theme-fontSec);
  }
  .labInfo{
    background-color: var(--theme-button);
    color: var(--theme-fontMain);
  }
</style>
